<template>
  <div>
    <!-- Element UI:表格
       default-expand-all：是否默认展开所有行
       tree-props="{ children: '子菜单所对应的键名'}"
     -->
    <el-table
      :data="menuArr"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :default-expand-all="false"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="菜单编号" sortable width="180">
      </el-table-column>
      <el-table-column prop="title" label="菜单名称" sortable width="180">
      </el-table-column>
      <el-table-column prop="icon" label="菜单图标">
         <template slot-scope="scoped">
           <i :class="scoped.row.icon"></i>
         </template>
      </el-table-column>
       <el-table-column prop="url" label="菜单地址"> </el-table-column>
       <el-table-column prop="status" label="状态"> 
        <!-- 插槽 -->
        <template slot-scope="scoped">
          <el-button v-if="scoped.row.status == 1" type="primary" size="mini">启用</el-button>
          <el-button v-else type="danger"  size="mini">禁用</el-button>
        </template>
       </el-table-column>
       <el-table-column  label="操作"> 
        <template slot-scope="scoped">
          <el-button @click="modifyMenu(scoped.row.id)"  type="primary">修改</el-button>
          <el-button @click="delOneMenu(scoped.row.id)" type="danger">删除</el-button>
        </template>
       </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { deleteOneMenuData } from "../../../request/api.js";
export default {
  props:['menuArr'],
  data() {
    return {
    };
  },
  methods:{
    delOneMenu(id){ //根据菜单id删除某个菜单数据
        this.$confirm('确定要删除该菜单吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { //删除菜单
             deleteOneMenuData({id}).then(d=>{
              if(d.data.code == 200){
                //刷新列表中菜单数据
                this.$emit('refreshData');                
                this.$message({
                  message: "菜单删除成功",
                  type: "success",
                });
              }else{
                this.$message({
                  message: "菜单删除失败",
                  type: "warning",
                });
              }
             }).catch(e=>{
                this.$message({
                  message: "删除菜单出现异常",
                  type: "error",
                });
             })
        });
    },
    modifyMenu(id){ //显示修改菜单的表单
      this.$emit('updatemenu',id);
    }
  }
};
</script>

<style>
</style>